<template>
  <div class="card-box">
    <el-dialog title="租赁合同查看" :visible.sync="viewDialogVisible" width="85%" :before-close="close" :close-on-click-modal="false">
      <el-tabs v-model="activeName">
        <el-tab-pane label="合同信息" name="first">
          <!--合同信息-->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>合同预览</span>
                </div>
                <div class="text item">
                  <div class="pdf">
                    <div @click="dialogContractVisible = true">
                      <pdf :src="pdfUrl" :page="1" />
                    </div>
                    <br />
                    <span>{{contractName}}</span>
                    <!--弹出合同详细内容-->
                    <el-dialog title="合同详情" :visible.sync="dialogContractVisible" width="80%" :before-close="handleClose" append-to-body>
                      <el-row>
                        <pdf :src="pdfUrl" :page="pageNum" @num-pages="pageTotalNum=$event" @link-clicked="page = $event" />
                      </el-row>
                      <span slot="footer" class="dialog-footer">
                        <el-row style="text-align: center;">
                          <h3>
                            <span>{{pageNum}}/{{pageTotalNum}}</span>
                          </h3>
                        </el-row>
                        <el-row style="text-align: center;">
                          <el-button type="primary" @click.stop="prePage">上一张</el-button>
                          <el-button type="primary" @click="dialogContractVisible = false">浏览完毕</el-button>
                          <el-button type="primary" @click.stop="nextPage">下一张</el-button>
                        </el-row>
                      </span>
                    </el-dialog>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-row>
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>承租方信息</span>
                  </div>
                  <div class="text item">
                    <el-row>
                      <el-form class="form-wrap" :model="propForm" size="small" ref="propForm">
                        <el-form-item label="承租方名称:">
                          <span>{{propForm!=null?propForm.clientLesseeName:""}}</span>
                        </el-form-item>
                        <el-form-item label="承租方类型:">
                          <span>{{lessee}}</span>
                        </el-form-item>
                        <!-- 第一行第3列-->
                        <el-form-item v-show="propForm !=null && propForm.clientLesseeType=='0'" label="证件类型:">
                          <span>{{personageCertificate}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null && propForm.clientLesseeType!='0'" label="证件类型:">
                          <span>{{commercialCertificate}}</span>
                        </el-form-item>
                        <!-- 第一行第4列-->
                        <el-form-item label="证件号码:">
                          <span>{{propForm!=null?propForm.certificateNum:""}}</span>
                        </el-form-item>

                        <!-- 第二行-->
                        <!-- 如果不是 "个人"，则会将下面一行会显示出来-->
                        <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="法人代表:">
                          <span>{{propForm!=null?propForm.legalPerson:""}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null &&  propForm.clientLesseeType!=0" label="身份证号码:">
                          <span>{{propForm!=null?propForm.legalIdentityCard:""}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null " label="手机号码:">
                          <span>{{propForm!=null?propForm.phoneNum:""}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="联系电话:">
                          <span>{{propForm!=null?propForm.telephone:""}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null " label="详细地址:">
                          <span>{{propForm!=null?propForm.address:""}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="行业类别:">
                          <span>{{propForm!=null?propForm.categroyEmployment:""}}</span>
                        </el-form-item>
                        <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="产业引进部门:">
                          <span>{{propForm!=null?propForm.introduceUnit:""}}</span>
                        </el-form-item>
                      </el-form>
                    </el-row>
                  </div>
                </el-card>
              </el-row>

              <el-row>
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>物业信息</span>
                  </div>
                  <div class="text item">
                    <el-row>
                      <el-table :data="propertyInformation" stripe align="center" style="width: 100%">
                        <el-table-column type="index" align="center" width="50"></el-table-column>
                        <el-table-column label="物业名称" align="center" prop="propertyName" width="150"></el-table-column>
                        <el-table-column label="建筑面积（㎡）" align="center" prop="buildingArea" width="100"></el-table-column>
                        <el-table-column label="物业评估价（元/㎡/月）" align="center" prop="assessPrice" width="100" v-if="false"></el-table-column>
                        <el-table-column prop="price" align="center" label="单价（元/㎡/月）" width="100"></el-table-column>
                        <el-table-column prop="remarks" align="center" label="说明" width="100"></el-table-column>
                      </el-table>
                    </el-row>
                  </div>
                </el-card>
              </el-row>
              <el-row>
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>租金标准</span>
                  </div>
                  <div class="text item">
                    <el-row>
                      <el-table :data="rentFeeInformation" stripe style="width: 100%">
                        <el-table-column prop="startDate" label="开始时间" width="100"></el-table-column>
                        <el-table-column prop="endDate" label="结束时间" width="100"></el-table-column>
                        <el-table-column prop="priceFinal" label="月租金" width="100"></el-table-column>
                        <el-table-column prop="remarks" label="说明" width="100"></el-table-column>
                      </el-table>
                    </el-row>
                  </div>
                </el-card>
              </el-row>
              <el-row>
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>其他费用</span>
                  </div>
                  <div class="text item">
                    <el-row>
                      <el-table :data="contractFee" style="width: 100%">
                        <el-table-column prop="chargeProjectName" label="费用项目名称" width="180"></el-table-column>
                        <el-table-column prop="feeStadard" label="缴费日期" width="180"></el-table-column>
                        <el-table-column prop="amount" label="金额" width="180"></el-table-column>
                      </el-table>
                    </el-row>
                  </div>
                </el-card>
              </el-row>
              <el-row>
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>合同信息</span>
                  </div>
                  <div class="text item">
                    <el-row>
                      <el-form :model="formData" class="form-wrap" size="small">
                        <el-form-item label="签订方式" prop="signType">
                          <span>{{signType}}</span>
                        </el-form-item>
                        <el-form-item label="收费方式" prop="feeType">
                          <span>{{feeType}}</span>
                        </el-form-item>
                        <el-form-item v-if="formData.feeType=='6'" label="自定义收费周期" prop="feeTypeValue">
                          <span>{{formData.feeTypeValue}}</span>
                        </el-form-item>
                        <el-form-item label="应收日" prop="feeDate">
                          <span>{{formData.feeDate}}</span>
                        </el-form-item>
                        <el-form-item label="合同订日期" prop="signDate">
                          <span>{{formData.signDate}}</span>
                        </el-form-item>
                        <el-form-item label="合同开始日期" prop="startDate">
                          <span>{{formData.startDate}}</span>
                        </el-form-item>
                        <el-form-item label="合同结束日期" prop="endDate">
                          <span>{{formData.endDate}}</span>
                        </el-form-item>
                        <el-form-item label="装修免租期" prop="rentStartDate">
                          <span>{{formData.freeFeeStart}}-{{formData.freeFeeEnd}}</span>
                        </el-form-item>

                        <el-form-item label="起租日期" prop="rentStartDate">
                          <span>{{formData.rentStartDate}}</span>
                        </el-form-item>
                        <el-form-item label="合同类型">
                          <span>{{type}}</span>
                        </el-form-item>
                        <el-form-item label="合同细类">
                          <span>{{subType}}</span>
                        </el-form-item>
                        <el-form-item label="建筑面积">
                          <span>{{formData.buildingArea}}</span>
                        </el-form-item>
                        <el-form-item label="月租金">
                          <span>{{formData.rentAmount}}</span>
                        </el-form-item>
                        <el-form-item label="管理所" prop="administrativeOffice">
                          <span>{{administrativeOffice}}</span>
                        </el-form-item>
                        <el-form-item label="备注" prop="remarks">
                          <span>{{formData.remarks}}</span>
                        </el-form-item>
                      </el-form>
                    </el-row>
                  </div>
                </el-card>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="收费明细" name="second">
          <contractDetails ref="contractDetails" />
        </el-tab-pane>
        <el-tab-pane label="变更记录" name="third">
          <contractChange ref="contractChange" />
        </el-tab-pane>
        <el-tab-pane label="续签记录" name="fourth">
          <contractRenew ref="contractRenew" />
        </el-tab-pane>
        <el-tab-pane label="退租记录" name="back">
          <contractBack ref="contractBack" />
        </el-tab-pane>
        <el-tab-pane label="审核记录" name="approve">
          <approval-record style="margin-top: 20px;" v-for="(item, index) in recordingLlist" :key="index" v-bind="item"></approval-record>
        </el-tab-pane>
        <el-tab-pane label="附件" name="attatch">
          <upload-media
            type="file"
            ref="rentContractFileUpload"
            :busId="formData.rentContractId"
            modelType="rent-contract"
            :isShowFileList="true"
            :isView="true"
          ></upload-media>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer">
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script src="./view.js"></script>
<style scoped lang="scss">
@import "./view";

@include formWrap();
</style>
